<template>
  <main class="registry-container">
    <section class="section-header">
      <logo class="nav-logo"></logo>
      <div class="welcome">
        欢迎注册
      </div>
    </section>
    <section class="main-section">
      <el-form class="registry-form"
               :model="entity" :rules="rules" ref="form" label-position="right" label-width="120px">
        <div class="login-title">会员注册</div>
        <el-form-item label="用户名" prop="loginName">
          <el-input v-model="entity.loginName" class="text loginName" type="text" placeholder="用户名"/>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="entity.password" class="text password" type="password" placeholder="密码"/>
        </el-form-item>
        <el-form-item prop="confirm" label="确认密码">
          <el-input v-model="entity.confirm" class="text password" type="password" placeholder="确认密码"/>
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="entity.nickName" type="text" placeholder="姓名"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNum">
          <el-input v-model="entity.phoneNum" type="number" placeholder="手机号"/>
        </el-form-item>
        <div class="submit-button" @click="handleSubmit">注册</div>
      </el-form>
    </section>
  </main>
</template>

<script>
import LoginAPI from '../../api/business/login';
import Logo from './components/Logo';
import AreaSelector from '../business/components/AreaSelector';

export default {
    components: {
        Logo,
        AreaSelector,
        LoginAPI
    },
    data: function () {
        return {
            entity: {
                loginName: null,
                nickName: null,
                password: null,
                phoneNum: null
            },
            rules: {
                loginName: [{
                    required: true, trigger: 'blur', message: '请填写用户名'
                }],
                password: [{
                    required: true, trigger: 'blur', validator: (rule, value, callback) => {
                        if (value && value.length && value.length < 6) {
                            callback(new Error('密码长度必须大于6'));
                        } else {
                            callback();
                        }

                    }
                }],
                confirm: [{
                    required: true, trigger: 'blur', validator: (rule, value, callback) => {
                        if (value === '') {
                            callback(new Error('请再次输入密码'));
                        } else if (value !== this.entity.password) {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    }
                }],
                type: [{ required: true, trigger: 'blur', message: '请选择类型' }],
                nickName: [{ required: true, trigger: 'blur', message: '请填写名称' }],
                phoneNum: [{ required: true, trigger: 'blur', message: '请填写手机号' },
                    {
                        validator: (rule, value, callback) => {
                            if (value === null || value.length !== 11) {
                                callback(new Error('请输入正确的手机号'));
                            }
                            callback();
                        }, trigger: 'blur'
                    }]
            },
            passwordType: 'password',
            loading: 0
        };
    },
    methods: {
        newEntity() {
            return {
                loginName: null,
                nickName: null,
                password: null,
                phoneNum: null,
            };
        },
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading++;
                    LoginAPI.userRegister(this.entity)
                        .then(() => {
                            this.$refs.form.resetFields();
                            this.$alert('注册成功，跳转至登录页...', '注册成功', {
                                type: 'success',
                                confirmButtonText: '跳转',
                                callback: () => {
                                    this.$router.push('/f/login');
                                }
                            });
                            this.loading--;
                        })
                        .catch(err => {
                            this.$alert(err.msg);
                            this.loading--;
                        });
                }
            });
        }
    }
};
</script>
<style lang="scss">
  @import "../../assets/front/front";

  .registry-container {
    width: $page-width;
    .section-header {
      padding: 10px 5px;
      height: 85px;
      display: flex;
      align-items: center;
      .nav-logo {
      }
      .welcome {
        margin-left: 10px;
        padding: 0 15px;
        height: 60px;
        @include flex-center;
        font-size: 24px;
        color: #646464;
        border-left: $border;
      }
    }
    .main-section {
      .registry-form {
        padding: 26px 54px;
        width: 840px;
        background-color: rgba(250, 250, 250, 0.75);
        border-radius: 5px;
        border: solid 1px rgba(230, 230, 230, 0.75);
        .login-title {
          margin-bottom: 15px;
          padding-bottom: 10px;
          font-size: 22px;
          color: #646464;
          border-bottom: $border;
        }
        .remember {
          margin-top: 15px;
          @include flex-center;
          justify-content: flex-start;
          > input {
            margin-right: 8px;
          }
        }
        .submit-button {
          margin-top: 15px;
          width: 100%;
          height: 40px;
          @include flex-center;
          color: white;
          background-color: #009040;
          border-radius: 4px;
          font-size: 20px;
          letter-spacing: 8px;
          cursor: pointer;
        }
        .ops {
          margin-top: 40px;
          display: flex;
          justify-content: flex-end;
          .op {
            margin-left: 20px;
            color: $main-color;
          }
        }
      }
    }
  }

</style>
